<template>
  <el-dialog
    class="myclue-detail"
    title="审核信息"
    width="30%"
    :visible.sync="dialogVisible"
    @open="open"
  >
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        hide-timestamp
      >
        <h4>{{ activity.content }}</h4>
        <p>{{ activity.time }}</p>
        <p>{{ activity.user }}</p>
        <p>{{ activity.desc }}</p>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script>
import { getCLueInfo } from '@/api/clue/clue-all';
export default {
  data() {
    return {
      activities: []
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.$parent.dialogVisible;
      },
      set(v) {
        this.$parent.dialogVisible = v;
      }
    },
    clueId() {
      return this.$parent.currentClueId;
    }
  },
  methods: {
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
    async getCLueInfo() {
      const { data: res } = await getCLueInfo(this.clueId);
      const activities = res.data.activities;
      console.log('api=获取线索时间线TimeLine', res);
      // 写的过滤数据的垃圾代码
      const arr = [
        { content: '线索提交' },
        { content: '鉴定估价' },
        { content: '征集完成' }
      ];
      for (let i = 0; i < activities.length; i++) {
        if (activities[i].clueUser) {
          arr[i].time = activities[i].clueTime;
          arr[i].user = '处理人：' + activities[i].clueUser;
          arr[i].desc = '意见：' + activities[i].desc;
        }
        const status = activities[i].status;
        if (status === -1) {
          arr[i].type = 'danger';
          arr[i].size = 'large';
        } else if (status === 0) {
          // 看看上一个是不是未审核
          if (
            i !== 0 &&
            (activities[i - 1].status === 0 || activities[i - 1].status === -1)
          ) {
            continue;
          } else {
            arr[i].type = 'primary';
            arr[i].size = 'large';
            arr[i].icon = 'el-icon-more';
          }
        } else if (status === 1) {
          arr[i].type = 'success';
        }
      }
      this.activities = arr;
    },
    open() {
      this.getCLueInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.myclue-detail {
  .line {
    display: flex;
    justify-content: space-between;
    color: #606266;
    .key {
      font-weight: 700;
    }
  }

  .line-desc {
    color: #606266;
    display: flex;
    .key {
      font-weight: 700;
      line-height: 25px;
    }
    .value {
      line-height: 25px;
      flex: 1;
    }
  }

  ::v-deep .el-collapse-item__header {
    font-weight: 700;
  }
}
</style>
